<template>
  <page-card title="连接器管理">
    <div class="form-list">
      <div class="public-list">
        <div class="public-list-tools">
          <a-row type="flex"
                 justify="end"
                 style="margin-bottom:20px">
            <a-col flex="1">
              <a-button type="primary"
                        icon="plus"
                        action
                        @click="handleEdit('')">
                新增
              </a-button>
            </a-col>
            <a-col :span="5"
                   style="display:flex;">
              <a-input-search placeholder="请输入关键词查询"
                              style="width: 400px"
                              v-model="params.keyWord"
                              allowClear
                              @search="search" />
            </a-col>
          </a-row>
        </div>
        <div class="public-list-panel">
          <a-table :columns="columns"
                   :data-source="dataList"
                   customCell="center"
                   :rowKey="record => record.id"
                   customHeaderCell="center"
                   :pagination="pagination"
                   @change="setPagination">
            <!-- 状态改变 -->
            <template slot="validationType"
                      slot-scope="text">
              <span v-if="text == '0'">无验证</span>
              <span v-if="text == '1'">auth2</span>
              <span v-if="text == '2'">JWT</span>
              <!-- <span v-if="text == '3'">API秘钥</span> -->
            </template>
            <template slot="requestProtocol"
                      slot-scope="text">
              <span v-if="text == '1'">HTTP</span>
              <span v-if="text == '2'">HTTPS</span>
            </template>
            <template slot="stutas"
                      slot-scope="text, record">
              <a-tag v-if="text != '1'"
                     color="red"
                     style="cursor: pointer"
                     @click="statusChange(record)">停用</a-tag>
              <a-popconfirm v-else
                            title="停用将会导致该连接器下所有接口不可用，确认停用吗？"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="statusChange(record)">
                <a-tag color="green"
                       style="cursor: pointer">启动</a-tag>
              </a-popconfirm>
            </template>
            <template slot="operation"
                      slot-scope="text, record">
              <a-button type="link"
                        size="small"
                        @click="handleEdit(record.id, record)">
                编辑
              </a-button>
              <a-divider type="vertical" />
              <a-popconfirm title="确定是否删除"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="confirm(record.id)">
                <a-button type="link"
                          size="small">
                  删除
                </a-button>
              </a-popconfirm>
            </template>
          </a-table>
        </div>
      </div>
    </div>
  </page-card>
</template>
<script>

// 1、引入Vue等框架组件库或插件
// 2、引入自定义组件
// 3、引入第三方工具类插件
// 4、引入自定义工具或插件或混入或基类等
// 5、引入API
import { connectorPage, connectorDelete, connectorUpdateState } from '../../api/connector-manage'

const columns = [{
  title: '连接器名称',
  dataIndex: 'name',
  key: 'name',
  align: 'left'
}, {
  title: '描述',
  dataIndex: 'detail',
  key: 'detail',
  align: 'left'
}, {
  title: '请求协议',
  dataIndex: 'requestProtocol',
  key: 'requestProtocol',
  align: 'left',
  scopedSlots: { customRender: 'requestProtocol' }
}, {
  title: '域名/IP地址',
  dataIndex: 'ipAddr',
  key: 'ipAddr',
  align: 'left'
}, {
  title: 'BASE_URL',
  dataIndex: 'baseUrl',
  key: 'baseUrl',
  align: 'left'
}, {
  title: '验证类型',
  dataIndex: 'validationType',
  key: 'validationType',
  scopedSlots: { customRender: 'validationType' },
  align: 'left'
}, {
  title: '创建时间',
  key: 'createTime',
  dataIndex: 'createTime',
  align: 'left'
}, {
  title: '状态',
  key: 'state',
  dataIndex: 'state',
  width: 100,
  scopedSlots: { customRender: 'stutas' },
  align: 'center'
}, {
  title: '操作',
  key: 'operation',
  width: 220,
  scopedSlots: { customRender: 'operation' },
  align: 'center'
}]

export default {
  name: 'YfConnectorList',
  extends: null,
  mixins: [],
  props: {},
  data () {
    return {
      columns: columns,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: total => `共 ${total} 条` // 显示总数
      },
      dataList: [],
      params: {
        keyWord: ''
      }
    }
  },
  computed: {
  },
  watch: {},
  created () {
    // this.getList()
  },
  activated () {
    this.getList()
  },
  methods: {
    // 删除
    confirm (id) {
      connectorDelete([id]).then(res => {
        this.message.success('删除成功')
        this.getList()
      })
    },
    // 状态改变
    statusChange (record) {
      const { state, ...other } = record
      let val = {
        ...other,
        state: state == '0' ? '1' : '0'
      }
      connectorUpdateState(val).then((res) => {
        this.message.success('操作成功')
        this.getList()
      })
    },
    // 搜索
    search () {
      this.pagination.current = 1
      this.getList()
    },
    setPagination (pagination) {
      this.pagination = pagination
      this.getList()
    },
    // 列表数据
    getList () {
      let param = {
        keyWord: this.params.keyWord,
        page: {
          current: this?.pagination?.current,
          size: this?.pagination?.pageSize
        }
      }
      connectorPage(param).then(res => {
        this.dataList = res.records || []
        this.pagination.current = parseInt(res.current)
        this.pagination.total = parseInt(res.total)
        this.pagination.pageSize = parseInt(res.size)
      })
    },
    // 新增、修改
    handleEdit (id, record) {
      this.$router.push({
        path: '/connector/edit',
        query: { id: id }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/* .form-list */
.page-style {
  margin-top: 20px;
  text-align: right;
}

.ant-divider,
.ant-divider-vertical {
  margin: 0px;
}
</style>